<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交留言</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h1 {
    color: #333;
  }

  .form-group {
    margin-bottom: 15px;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  textarea {
    width: 300px; /* 可以根据需要调整宽度 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }

  button {
    background-color: #5cb85c; /* Bootstrap绿色按钮颜色 */
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
  }

  button:hover {
    background-color: #4cae4c;
  }
</style>
<script>
  
function submitMessage() {
  // 获取留言和姓名的值
  const nameContent = document.getElementById('name').value;
  const messageContent = document.getElementById('message').value;

  // 创建要发送的数据对象
  const dataToSend = {
    name: nameContent,
    content: messageContent
  };

  // 使用fetch API发送数据
  fetch('/api/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(dataToSend) // 将数据对象转换为JSON字符串
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    alert('留言提交成功！');
    // 清空表单
    document.getElementById('name').value = '';
    document.getElementById('message').value = '';
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}
</script>
</head>
<body>
  <h1>提交留言</h1>

  <div class="form-group">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
  </div>

  <div class="form-group">
    <label for="message">留言:</label>
    <textarea id="message" name="message"></textarea>
  </div>

  <button onclick="submitMessage()">提交</button>
</body>
</html>
